<template>
	<div class="box">
		<template v-for="(item,index) in qidArr" >
			
			<template v-if="item && item.arr.length>0">
				<div class="maintitle"> {{item.name}}（{{item.score}}分/{{item.totalscore}}分）</div>
				<div class="number-box">
					<div class="num practice" :class="{ right: item.config[qindex]===0,wrong:item.config[qindex]===1,empty:item.config[qindex]===2}" v-for="(q, qindex) in item.arr" :key="qindex" @click="goDetail(index,qindex)">
						{{ q }}
					</div>
				</div>
			</template>
		</template>
	</div>
</template>
<script>
	export default {
		props: ["qidArr"],
		data() {
			return {};
		},
		watch:{
			qidArr(nv,ov){
				
			}
		},
		methods: {
			goDetail(tindex,qindex) {
				this.$emit("change",tindex,qindex);
			},
		},
	};
</script>
<style lang="less" scoped>
	.box {
		width: 100%;
		padding:12px;
		.maintitle{
			font-size: 16px;
			color:#333;
			margin-bottom:5px;
		}
		.number-box {
			width: 100%;
			margin-bottom:10px;
			box-sizing: border-box;
			display: grid;
			grid-row-gap:5px;
			grid-column-gap: 12px;
			grid-template-columns: repeat(5, minmax(0, 1fr));

			.practice {
				border: 1px solid #3ca7fa;
				color: #3ca7fa;

				&.right {
					background-color: #67c23a;
					color: #ffffff;
					border:none;
				}
				&.wrong {
					background-color: #ff5068;
					color: #ffffff;
					border:none;
				}
				&.empty {
					background-color: #c0c4cc;
					color: #ffffff;
					border:none;
				}
			}

			

			.num {
				width: 38px;
				height: 38px;
				border-radius: 3px;
				cursor: pointer;
				display: flex;
				align-items: center;
				justify-content: center;

				&:hover {
					opacity: 0.8;
				}
			}
		}

	}
</style>
